<template>
    <div class="wuhan_car">
        <div id="container" class="container">
        </div>
    </div>
</template>


<script>
import axios from '@/utils/axios'
export default {
    data (){
        return{
            path: null
        }
    },
    watch: {
        path:function() {
            this.map()
        }
    },
    methods:{
        getData() {
            axios.get('/car/findAllCar').then((res)=>{
                this.path = res.data.data
            })
        },
        map(){
            var map = new AMap.Map('container', {
                mapStyle: 'amap://styles/darkblue',
                center: [114.284702, 30.5],
                zoom: 11.5,
                features: ['bg', 'road', 'building', 'point'],
                skyColor: '#eee',
                pitch: 0,
                viewMode: '3D'
        });

        $.get(this.path, function (csv) {
            var layer = new Loca.PointCloudLayer({
                map: map,
                fitView: false
            });

            layer.setData(csv, {
                lnglat: function (obj) {
                    var value = obj.value;
                    return [value['lng'], value['lat']];
                },
                type: 'csv'
            });

            layer.setOptions({
                style: {
                    opacity: 0.8,
                    radius: 0.9,
                    color: 'rgba(42, 167, 184, 1)',
                }
            });

            layer.render();
        });
     }
    },
    created(){
        this.getData()
    },
}
</script>

<style scoped>
.container{
    height: 900px;
    width: 1400px;
}
</style>
